import React from "react";
import Control from "../component/Control"
import Panel from "../component/Panel"
import {isFiveSuccess} from "../utils/success";
import{message,Modal} from "antd";

export default class FiveGame extends React.Component{
    constructor() {
        super();

        this.state= this.getInitData();
    }
    getInitData(){
        const boardData = []
        for(let i = 0;i<15;i++){
            boardData.push(new Array(15).fill(0))
        }
        this.history=[];
        this.whiteUndo = 3;
        this.blackUndo = 3;
        return {
            // 棋盘数据
            boardData,
            isBlack:true,
            success:false,

        }
    }

    playChess(row,col){
        console.log(row,col)
        const{isBlack,boardData,success} = this.state
        if(success){
            message.info('游戏已经结束，请开始下一把')
            return;
        }
        // 状态改变之前记录状态
        this.history.push(JSON.parse(JSON.stringify(this.state)))
        boardData[row][col] = isBlack ? 1 : 2;
        const isSuccess = isFiveSuccess(boardData,row,col)

        this.setState({
            boardData,
            isBlack:!isBlack,
            success : isSuccess
        })
    }
    restart(){
        this.setState(this.getInitData())
    }
    undo(){
        if(this.history.length ===0){
            message.warn("没有棋可以悔了")
            return;
        }
        if(this.state.isBlack?this.whiteUndo<=0:this.blackUndo<=0){
            const { confirm } = Modal;
            confirm({

                content:`您没有悔棋机会了`,
                okText:"充钱继续",
                cancelText:"取消",
                onOk:()=>{
                    if(this.state.isBlack){
                        this.whiteUndo=3
                    }else{
                        this.blackUndo=3
                    }

                },
                onCancel() {
                    console.log('Cancel');
                },
            });
            return;
        }
        const { confirm } = Modal;
        confirm({

            content:`你确定要悔棋吗,您还有${this.state.isBlack?this.whiteUndo:this.blackUndo}次机会`,
            okText:"确定",
            cancelText:"取消",
            onOk:()=>{
                console.log('ok');
                this.setState(this.history.pop())
                if(this.state.isBlack){
                    this.whiteUndo--
                }else{
                    this.blackUndo--
                }

            },
            onCancel() {
                console.log('Cancel');
            },
        });

    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        if(this.state.success){
            const { confirm } = Modal;
            confirm({

                content:`恭喜${this.state.isBlack?"白棋":"黑棋"}获胜`,
                okText:"重现开始",
                cancelText:"取消",
                onOk:()=>{
                    console.log('ok');
                    this.restart()
                },
                onCancel() {
                    console.log('Cancel');
                },
            });
        }
    }

    render(){
        // const checkerboard=new Array(15).fill(0);
        return(
            <div className="five-game-container">
                <div className="bgc"/>
                <Control restart={this.restart.bind(this)} undo={this.undo.bind(this)}/>
                <Panel boardData = {this.state.boardData} playChess={this.playChess.bind(this)}/>
            </div>
        )

    }
}